@import "mixins";
@import "base";

#header{
  background-color: #000;
  &::after{
    .border-bottom(#cbcbcb);
  }
  .header-container{
    margin: 0 auto;
    width: 1200px;
    height: 73px;
    //弹性盒子
    display: flex;//变成一排
    justify-content: space-between; //主轴方向对齐
    img{
      width: 200px;
      height: 70px;
    }
    .logo{
      width: 198px;
      height:63px ;
      margin: 5px 30px;
    }
    .nav{
      display: flex;
      a{
        width: 110px;
        height: 73px;
        text-align: center;
        line-height: 73px;
        color: #fff;
        text-decoration: none;
        transition: .2s;
        &:nth-child(1){
          background: #433b90;
        }
        &:nth-child(2){
          background: #017fcb;
        }
        &:nth-child(3){
          background: #78b917;
        }
        &:nth-child(4){
          background: #feb800;
        }
        &:nth-child(5){
          background: #f27c01;
        }
        &:nth-child(6){
          background: #d40112;
        }
        &:hover{
          height: 80px;
        }
      }
    }
  }

}
#banner{
  background: #eaeaea;
  &::after{
    .border-bottom(#d2d2d2);
  }
  .banner-container{
    width: 1200px;
    height: 538px;
    margin: 0 auto;
    position: relative;
    a{
      position: absolute;
      //居中
      top: 0;
      bottom: 0;
      margin-top: auto;
      margin-bottom: auto;
      width: 610px;
      height: 300px;
      &:nth-child(1){//左边图片
        left:0;
      }
      &:nth-child(2){//中间的图片
        width: 880px;
        height: 400px;
        //中间的图片居中 左右居中
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        z-index:3;
      }
      &:nth-child(3){//右边图片
        right: 0;
      }
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
}
#content{
  &::after{
    .border-bottom(#808080);
  }
  .content-container{
    width: 1200px;
    height: 473px;
    margin:34px auto 0;
    display: flex;
    justify-content: space-between;
    .content-title{
      margin-bottom: 35px;
      font-size: 32px;
      font-weight: bold;
      span{
        color: gray;
        font-size: 32px;
      }
    }
    aside{
      width: 450px;
      .content-item{
        margin-bottom: 25px;
        a{
          display: flex;
          justify-content: space-between;
          color: #333;
          .content-item-left{
              width: 71px;
              height: 71px;
              img{
                width: 100%;
                height: 100%;
              }
          }
          .content-item-right{
            width: 360px;
            h3 {
              text-decoration: underline;
            }
          }
        }
      }
    }
    .article{
      width: 720px;

      p{
        margin-bottom: 10px;
        font-size: 16px;
      }
      img{
        width: 100%;
        margin-bottom: 10px;
      }
    }
  }
}
#footer{
  background: #000;
  line-height: 64px;
  .footer-container{
    width: 1200px;
    height: 64px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    color: #fff;
    .icon-list{
      display: flex;
      align-items: center;//侧轴居中
      a{
        margin-right: 5px;
        opacity: .7;
        transition: .2s;
        &:hover{
          opacity: 1;
        }
      }
    }
  }
}